import { Link } from "react-router-dom";
import { cn } from "@/lib/utils";

export default function Home() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center p-4">
      <div className="w-full max-w-md">
        <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
          <div className="p-8">
            <h1 className="text-3xl font-bold text-center text-gray-800 dark:text-white mb-6">WiFi二维码生成器</h1>
            <p className="text-gray-600 dark:text-gray-300 text-center mb-8">
              轻松创建WiFi二维码，让客人扫描即可连接，无需手动输入密码
            </p>
            <div className="flex justify-center">
              <Link
                to="/wifi-qr-code"
                className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-full transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 flex items-center gap-2"
              >
                <i className="fa-solid fa-qrcode"></i>
                开始生成
              </Link>
            </div>
          </div>
          <div className="h-40 bg-gradient-to-r from-blue-500 to-indigo-600 relative overflow-hidden">
            <div className="absolute inset-0 opacity-20">
              <i className="fa-solid fa-wifi text-[120px] absolute top-[-20px] left-[-20px] text-white"></i>
              <i className="fa-solid fa-qrcode text-[80px] absolute bottom-[-10px] right-[-10px] text-white"></i>
            </div>
          </div>
        </div>
        <p className="text-center text-gray-500 dark:text-gray-400 text-sm mt-4">
          安全 · 便捷 · 无需记住复杂密码
        </p>
      </div>
    </div>
  );
}